<template>
    <!-- 选择驱动 -->
    <el-select v-model="queryParams.driverId" placeholder="选择驱动"
               size="small"
               @change="getParseAttributeListByParam">
        <el-option
                v-for="driverInfo in driverList"
                :key="driverInfo.driverId"
                :label="driverInfo.driverName"
                :value="driverInfo.driverId"
        />
    </el-select>
    <el-button
            type="primary"
            plain
            icon="el-icon-plus"
           
            @click="handleAddAttribute"
            v-if="queryParams.driverId"
    >新增
    </el-button>
    <!-- 属性列表(属于某一个协议的) -->
    <el-table :data="attributeListData" row-key="attributeId"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="slaveId" align="center" label="从站编号"/>
        <el-table-column prop="functionCode" align="center" label="功能码"/>
        <el-table-column prop="offset" align="center" label="偏移量"/>
        <el-table-column prop="attributeType" align="center" label="属性类型" :formatter="valueTypeFormat"/>
        <el-table-column prop="createTime" align="center" label="创建时间"/>
        <el-table-column label="操作" align="center" width="330px">
            <template v-slot="scope">
                <el-button icon="el-icon-plus"
                           @click="handleAddAttribute(scope.row)">新增
                </el-button>
                <el-button icon="el-icon-edit"
                           @click="handleUpdateAttribute(scope.row)">修改
                </el-button>
                <el-button icon="el-icon-delete"
                           @click="handleDeleteAttribute(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <update-attribute :title="title" :open="open" :form="form"
                      :attribute-type-options="attributeTypeOptions"
                      v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update-attribute>
</template>

<script>

    import updateAttribute from './update.vue'
    import {getParseAttributeList} from '/src/api/driver/parseModbus'
    import {getDriverList} from "/src/api/driver/manage";

    export default {
        name: "index",
        components: {updateAttribute},
        data() {
            return {
                attributeTypeOptions: [],
                driverList: [],
                queryParams: {
                    driverId: ''
                },
                driverQueryParam: {
                    driverType: 'modbus'
                },
                attributeListData: [],
                //新增或修改
                open: false,
                title: '',
                form: {},
            }
        },
        created() {
            this.getDicts("sys_data_type").then(response => {
                this.attributeTypeOptions = response.data;
            });
            this.getDriverListByParam();
        },
        methods: {
            getDriverListByParam() {
                getDriverList(this.driverQueryParam).then(response => {
                    this.driverList = response.data
                })
            },
            getParseAttributeListByParam() {
                getParseAttributeList(this.queryParams).then(response => {
                    this.attributeListData = response.data;
                });
            },
            handleAddAttribute(row) {
                this.open = true
                if (row) {
                    this.form = {
                        driverId: this.queryParams.driverId,
                        parentAttributeName: row.attributeName,
                        parentId: row.attributeId
                    }
                } else {
                    this.form = {
                        driverId: this.queryParams.driverId,
                        parentId: 0
                    }
                }
                this.title = '添加属性信息'
            },
            handleUpdateAttribute(row) {
                this.open = true
                this.form = row
                this.title = '修改属性信息'
            },
            handleDeleteAttribute(row) {

            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getParseAttributeListByParam()
            },
            // 菜单状态字典翻译
            valueTypeFormat(row, column) {
                return this.selectDictLabel(this.attributeTypeOptions, row.attributeType);
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>
